<template>
  <div class="menu-grid" :style="containerStyle">
    <!-- 无菜单 -->
    <div v-if="!data.menuList || !data.menuList.length" class="empty-container">
      <el-empty description="暂无菜单" />
    </div>

    <!-- 菜单网格 -->
    <div
      v-else
      class="menu-grid-container"
      :style="gridStyle"
    >
      <div
        v-for="(menu, index) in data.menuList"
        :key="index"
        class="menu-item"
        :style="itemStyle"
      >
        <div class="menu-icon-container">
          <img
            v-if="menu.image"
            :src="menu.image"
            :alt="menu.text"
            class="menu-image"
          />
          <el-icon
            v-else
            :size="data.iconSize || 24"
            :style="{ color: data.iconColor || '#333333' }"
          >
            <component :is="getIconComponent(menu.icon)" />
          </el-icon>
        </div>

        <div 
          v-if="data.showText !== false"
          class="menu-text"
          :style="textStyle"
        >{{ menu.text }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { 
  Picture, 
  ShoppingCart, 
  User, 
  Setting, 
  Star, 
  Bell,
  Location,
  Phone
} from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 图标映射
const iconMap = {
  'picture': Picture,
  'shopping-cart': ShoppingCart,
  'user': User,
  'setting': Setting,
  'star': Star,
  'bell': Bell,
  'location': Location,
  'phone': Phone
}

// 获取图标组件
function getIconComponent(iconName) {
  return iconMap[iconName] || Picture
}

// 计算容器样式
const containerStyle = computed(() => {
  return {
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`,
    backgroundColor: props.data.backgroundColor || '#ffffff',
    backgroundImage: props.data.backgroundImage ? `url(${props.data.backgroundImage})` : 'none'
  }
})

// 计算网格样式
const gridStyle = computed(() => {
  return {
    display: 'grid',
    gridTemplateColumns: `repeat(${props.data.columns || 4}, 1fr)`,
    gap: `${props.data.padding || 10}px`,
    padding: `${props.data.padding || 10}px`
  }
})

// 计算菜单项样式
const itemStyle = computed(() => {
  return {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '10px',
    borderRadius: `${props.data.borderRadius || 0}px`
  }
})

// 计算文本样式
const textStyle = computed(() => {
  return {
    fontSize: `${props.data.textSize || 12}px`,
    color: props.data.textColor || '#333333',
    marginTop: '5px',
    height: `${props.data.textHeight || 20}px`,
    lineHeight: `${props.data.textHeight || 20}px`,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  }
})
</script>

<style lang="scss" scoped>
.menu-grid {
  width: 100%;

  .empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
  }

  .menu-grid-container {
    width: 100%;

    .menu-item {
      transition: transform 0.3s;
      cursor: pointer;

      &:hover {
        transform: scale(1.05);
      }

      .menu-icon-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 45px;

        .menu-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
        }
      }

      .menu-text {
        text-align: center;
        width: 100%;
      }
    }
  }
}
</style>
